<template>
  <el-main>
    <div>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="请输入航班号:">
          <el-row>
            <el-col :span="50">
              <el-input style="width: 400px;height: 30px" v-model="form.dfltFlno"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="请输入状态:">
          <el-row>
            <el-col :span="50">
              <el-select style="width: 400px" v-model="form.status" placeholder="请选择状态">
                <el-option label="未审核" value="1" />
                <el-option label="审核通过" value="2" />
                <el-option label="驳回" value="3" />
                <el-option label="未知状态" value="4" />
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-col :span="10">
            <el-button class="btn1" type="primary" @click="onSubmit"
              >查询</el-button
            >
          </el-col>
      </el-form>
    </div>
    <!-- 数据表 -->
    <el-table
      ref="singleTable"
      highlight-current-row
      style="width: 100%"
      :data="tableData"
      :row-class-name="tableRowText"
    >
      <el-table-column property="dfltFlno" label="航班号" width="100">
      </el-table-column>
      <el-table-column property="dfltAwcd" label="航空公司" width="150">
      </el-table-column>
      <el-table-column property="apcd" label="航线路由" width="120">
      </el-table-column>
      <el-table-column property="dtime" label="日期" width="200">
      </el-table-column>
      <el-table-column property="fptt" label="计划起飞时间" width="220">
      </el-table-column>
      <el-table-column property="fplt" label="预计降落时间" width="220">
      </el-table-column>
      <el-table-column property="flightStatus" label="原因" width="150">
      </el-table-column>
      <el-table-column label="状态" width="150">
        <template #default="scope">
          <span>{{ scope.row.checkStatus }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="count"
      :current-page="page"
      :pageCount="pageCount"
      @current-change="changePage"
    >
    </el-pagination>
  </el-main>
    </template>
    
<script>
    export default {
      name: "AairnonstopCheck",
      data() {
    return {
      checkStatus: "",
      selectLabel: 0,
      tableDataType: 1,
      called:false,
      formLabelWidth: "120px", //表单文本宽度
      tableData: [{}], 
      count: 0, //记录总数
      page: 1, //当前页码
      pageCount: "", //总页数
      form: {
        status: "",
        dfltFlno: "",
      }
    }
      },
      methods: {
        tableRowText({ row, rowIndex }) {
      if (row.status === 2) {
        return "green-text";
      }
      if (row.status === 3) {
        return "red-text";
      }
      return "";
    },
        changePage(currentPage) {
      this.page = currentPage;
      switch (this.tableDataType){
        case 1:
          this.fetchData();
          break;
        case 2:
          this.onSubmit();
          break;
      }
    },
    fetchData() {
      const pageNum = this.page;
      const pageSize = 10; // 设置每页显示的数据条数

      this.$axios
        .get("http://localhost:8888/dfdlcheck/getA2", {
          params: { pageNum, pageSize },
        })
        .then((response) => {
          const result = response.data.data;
          const list = result.list;
          list.forEach(item => {
  const status = item.status;
  // console.info(status);
  switch (status) {
    case 1:
      item.checkStatus = "未审核";
      break;
    case 2:
      item.checkStatus = "审核通过";
      break;
    case 3:
      item.checkStatus = "驳回";
      break;
    default:
      item.checkStatus = "未知状态";
      break;
  }

});
        this.count = result.size;
          this.pageCount = Math.ceil(result.total / pageSize);
          this.tableData = result.list;
          this.tableDataType = 1;
        })
        .catch((error) => {
          console.error(error);
        });
    },

    onSubmit() {
      const pageNum = this.page;
      const pageSize = 10;
      const dfltFlno = this.form.dfltFlno;
      console.info(dfltFlno);
      const status=this.form.status;
      console.info(status);
      const dfltAwcd = "";
      this.$axios
        .get("http://localhost:8888/dfdlcheck/searchBy", {
          params: {
            dfltFlno,status,pageNum,pageSize
          },
        })
        .then((response) => {
          const result = response.data.data;
          console.info(result);
          if(response.data.status!=10000){
          
            this.$message.error({
              type:"error",
              message:"查询失败，没有数据"
            })
          }
        //   console.info(result);
          this.count = result.size;
          this.pageCount = Math.ceil(result.total / pageSize);
          const list1 = result.list;
          list1.forEach(item => {
            const status = item.status;
            switch (status) {
              case 1:
                item.checkStatus = "未审核";
                break;
              case 2:
                item.checkStatus = "审核通过";
                break;
              case 3:
                item.checkStatus = "驳回";
                break;
              default:
                item.checkStatus = "未知状态";
                break;
            }
          });
          this.tableData = result.list;
          if(result.list.length!=0 && !this.called){
            this.tableDataType=2;
            this.$message.success({
              type:"success",
              message:"查询成功"
            })
            // this.called=true;
          }

        });
    },
        
    }  
    ,mounted() {
    this.fetchData();
    
  },

  }
    </script>
    
<style>
.btn1 {
  margin-left: 20px;
  margin-top: 2px;
  margin-bottom: 10px;
}
.red-text {
  color: red;
}

.orange-text {
  color: orange;
}

.green-text {
  color: green;
}

    </style>